import React, { useState, useEffect } from 'react';
import { Row, Col, Typography, Avatar, Image, message, Modal } from 'antd';
import { ArrowRightOutlined, FileFilled, LockFilled } from '@ant-design/icons';
import { useModel, history } from 'umi';
import { doFetch } from '@/utils/doFetch';
import { useRequest } from 'ahooks';
import InitForm from '@/components/InitForm';
import { getPwdStrengthlength } from '@/components/StrengthPwd/strength';
import { encode_utf8_b64, decode_utf8_b64 } from '@/utils/encode';

const { Paragraph } = Typography;

let col = { xs: 0, sm: 0, md: 8, lg: 7, xl: 6, xxl: 5 },
  cols = { xs: 24, sm: 24, md: 16, lg: 17, xl: 18, xxl: 19 };

function Account() {
  const { initialState, setInitialState } = useModel('@@initialState');
  let cur = initialState?.currentUser ?? {};
  const [vs, setvs] = useState(false);
  const [ins, setin] = useState(false),
    [val, setval] = useState({
      real_name: cur?.real_name,
      position: cur?.position,
      phone: cur?.phone,
      password: cur?.password,
      name: cur?.name,
    });

  let { run, loading } = useRequest(doFetch, {
    debounceWait: 300, //防抖
    manual: true,
    formatResult: (res) => res,
    onSuccess: (result, params) => {
      if (result.code == 0) {
        setvs(false);
        setInitialState((s) => ({ ...s, currentUser: undefined }));
        history.replace('/user/login');
        message.success('由于您修改了密码，请重新登陆');
      }
    },
  });

  useEffect(() => {
    if (val.changed && vs === false) {
      doFetch({ url: '/vehicle-api/user/setting', params: val, type: 'PUT' });
    }
  }, [val, vs]);

  let onchange = (key, val) => {
    setval((value) => ({
      ...value,
      [key]: val,
      changed: true,
    }));
  };

  return (
    <div style={{ height: '100%', padding: 12 }}>
      <Modal
        visible={vs}
        title={'修改密码'}
        footer={false}
        onCancel={() => {
          setvs(false);
        }}
        destroyOnClose
      >
        <InitForm
          fields={{
            origin_password: {
              value: null,
              type: 'password',
              title: '旧密码',
              name: ['origin_password'],
              required: true,
              col: { span: 24 },
            },
            new_password: {
              value: null,
              type: 'password',
              title: '新密码',
              name: ['new_password'],
              required: true,
              col: { span: 24 },
            },
          }}
          submitData={(values) => {
            if (getPwdStrengthlength(values.new_password) != 4) {
              message.warning('您的密码强度较弱，请按照提示规则设置密码！');
              return;
            }
            let oldval = encode_utf8_b64(values?.origin_password);
            oldval = encode_utf8_b64(oldval);
            oldval = encode_utf8_b64(oldval);
            let newval = encode_utf8_b64(values?.new_password);
            newval = encode_utf8_b64(newval);
            newval = encode_utf8_b64(newval);
            run({
              url: '/vehicle-api/user/set_password',
              params: {
                origin_password: oldval,
                new_password: newval,
              },
              type: 'PUT',
            });
          }}
          onChange={(changedValues) => {
            //联动操作
          }}
          submitting={loading}
        />
      </Modal>
      <Row style={{ height: '100%' }} gutter={12}>
        <Col {...col}>
          <div
            className="images"
            style={{
              height: '100%',
              backgroundImage: `url(${require('@/assets/leftset.png')})`,
              position: 'relative',
            }}
            onMouseEnter={() => {
              setin(true);
            }}
            onMouseLeave={() => {
              setin(false);
            }}
          >
            <p
              className="center"
              style={{
                position: 'absolute',
                top: 24,
                color: '#fff',
                fontSize: 18,
                textAlign: 'center',
                width: '100%',
                margin: '12px 0px',
                paddingRight: 18,
              }}
            >
              个人中心
              <ArrowRightOutlined
                style={{ position: 'absolute', right: 34 }}
                className={ins ? 'anile' : ''}
              ></ArrowRightOutlined>
            </p>
          </div>
        </Col>
        <Col {...cols}>
          <div
            style={{
              height: '100%',
              backgroundColor: 'rgba(0,0,0,0.4)',
              color: '#fff',
              display: 'flex',
              flexDirection: 'column',
              alignItems: 'center',
              padding: 24,
            }}
          >
            <p className="title" style={{ marginBottom: 24 }}>
              <span>
                <FileFilled style={{ paddingRight: 6 }}></FileFilled>
                管理人员信息
              </span>
            </p>

            <Avatar
              src={
                <Image
                  width={120}
                  height={120}
                  src={cur?.head_image ? cur.head_image : require('@/assets/user.png')}
                />
              }
              size={120}
            />
            <span style={{ margin: '12px 0', color: '#79d7ff' }}>{val?.real_name}</span>
            <div className="spacebt" style={{ width: '100%', margin: '12px 0px', marginTop: 36 }}>
              <span style={{ fontSize: 16 }}>姓名</span>
              <Paragraph
                editable={{
                  tooltip: '点击修改',
                  onChange: (val) => onchange('real_name', val),
                }}
                style={{ marginBottom: 0, color: '#fff' }}
              >
                {val?.real_name}
              </Paragraph>
            </div>
            <div className="spacebt" style={{ width: '100%', margin: '12px 0px' }}>
              <span style={{ fontSize: 16 }}>职位</span>
              <Paragraph
                editable={{
                  tooltip: '点击修改',
                  onChange: (val) => onchange('position', val),
                }}
                style={{ marginBottom: 0, color: '#fff' }}
              >
                {val?.position}
              </Paragraph>
            </div>
            <div className="spacebt" style={{ width: '100%', margin: '12px 0px' }}>
              <span style={{ fontSize: 16 }}>联系方式</span>
              <Paragraph
                editable={{
                  tooltip: '点击修改',
                  onChange: (val) => onchange('phone', val),
                }}
                style={{ marginBottom: 0, color: '#fff' }}
              >
                {val?.phone}
              </Paragraph>
            </div>
            <p className="title" style={{ marginTop: 36 }}>
              <span>
                <LockFilled style={{ paddingRight: 6 }}></LockFilled>
                账户管理
              </span>
            </p>
            <div className="spacebt" style={{ width: '100%', margin: '12px 0px' }}>
              <span style={{ fontSize: 16 }}>账户密码</span>
              <a
                onClick={() => {
                  setvs(true);
                }}
              >
                修改密码
              </a>
            </div>
            <div className="spacebt" style={{ width: '100%', margin: '12px 0px' }}>
              <span style={{ fontSize: 16 }}>用户名</span>
              <Paragraph
                editable={{
                  tooltip: '点击修改',
                  onChange: (val) => onchange('name', val),
                }}
                style={{ marginBottom: 0, color: '#fff' }}
              >
                {val?.name}
              </Paragraph>
            </div>
          </div>
        </Col>
      </Row>
    </div>
  );
}

export default Account;
